<template>
  <a-modal title-align="start" title="属性筛选" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="800">
    <a-descriptions :data="searchList" :label-style="{ textAlign: 'right' }" :column="2">
      <template #label="{ data }">{{ data.name }}：</template>
      <template #value="{ data }">
        <div v-if="data.type == '1' || data.type == '2'">
          <a-select v-model="searchForm.find((e:any) => e.code == data.code).valueList" allow-search multiple allow-clear :max-tag-count="2" placeholder="请选择" style="width: 270px">
            <a-option v-for="item in data.propValueList" :key="item.value" :value="item.propValue">{{ item.propValue }}</a-option>
          </a-select>
        </div>
        <div v-if="data.type == '4'">
          <a-input
            v-if="data.name != '石重(Ct)'"
            @change="
              remarkInput(
                $event,
                searchForm.find((e: any) => e.code == data.code)
              )
            "
            allow-clear
            v-model="searchForm.find((e:any) => e.code == data.code).valueList[0]"
            placeholder="请输入"
          />

          <a-space v-if="data.name == '石重(Ct)'">
            <a-input allow-clear v-model="searchForm.find((e:any) => e.code == data.code).startNum" placeholder="请输入" />
            <a-input allow-clear v-model="searchForm.find((e:any) => e.code == data.code).endNum" placeholder="请输入" />
          </a-space>
        </div>
      </template>
    </a-descriptions>
    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { onMounted, ref, computed } from 'vue'
  const props = defineProps(['modelValue', 'propsList', 'formList'])
  const emits = defineEmits(['search', 'update:modelValue'])
  const showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  const searchList = ref([])
  const searchForm = ref<any>([])
  const init = () => {
    searchForm.value = []
    searchList.value = props.propsList || []
    searchList.value.forEach((e: any) => {
      let obj = {
        code: e.code,
        startNum: '',
        endNum: '',
        type: e.type,
        valueList: [],
      }
      // 回显
      let item = props.formList.find((e: any) => e.code == obj.code)
      if (item) {
        obj.valueList = item.valueList
        obj.startNum = item.startNum
        obj.endNum = item.endNum
      }
      searchForm.value.push(obj)
    })
  }

  const remarkInput = (val: string, data: any) => {
    if (val == '') {
      data.valueList = []
    }
  }

  const submit = () => {
    emits('search', searchForm.value)
    showvisible.value = false
  }

  onMounted(init)
</script>

<style lang="less" scoped></style>
